<template>
	<view class="custom-system ss-p-b-20" @click="customDetails(message)">
		<view class="custom-system-platform">
			{{message.payload.custom.platform}}
		</view>
		<view class="custom-system-title ss-m-t-26 ss-p-x-28">{{message.payload.custom.title}}</view>
		<view class="custom-system-content ss-m-t-16 ss-p-x-28"
			:class="[message.payload.custom.link_url ? 'ss-line-2' : '']">
			{{message.payload.custom.content}}
		</view>
		<view class="custom-system-details ss-p-t-20 ss-m-t-14 ss-flex justify-between align-center ss-p-x-28"
			v-if="message.payload.custom.link_url">
			<view class="custom-details-left">查看详情</view>
			<uni-icons type="right" size="18" color="#A6A6A6"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	import {cdn,udid} from '@/im/config/index.js'
	const props = defineProps({
		message: {
			type: Object,
			default: {}
		}
	})
	
	const customDetails = (msg) => {
		if (udid === msg.payload.custom.tag) {
			uni.navigateTo({
				url: msg.payload.custom.link_url
			})
		} else {
			uni.showToast({
				title: '请前往指定平台查看详情!',
				icon: 'none',
				duration: 2000
			});
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.custom-system {
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;

		.custom-system-platform {
			height: 84rpx;
			padding-left: 36rpx;
			line-height: 84rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			border-bottom: 1rpx solid #F5F5F5;
		}

		.custom-system-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.custom-system-content {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
		}

		.custom-system-details {
			border-top: 1rpx solid #F5F5F5;

			.custom-details-left {
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
	}
</style>